<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="form" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.SETTLEMENT_CURRENCY' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <app-currency-select [intStoreCode]="collectionData.intStoreCode" formControlName="depositCurr"
              name="depositCurr"></app-currency-select>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('depositCurr'), name:'depositCurr'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'OPERATION.DEPOSIT.TARGET_AMT' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <nz-input-number formControlName="depositAmt" name="depositAmt" [nzMin]="1" [nzMax]="999999999999"
              [nzStep]="1000" [nzPrecision]="0" style="width: 100%;"></nz-input-number>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('depositAmt'), name:'depositAmt'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'OPERATION.DEPOSIT.DAY_RATE' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <nz-slider formControlName="singlePercent" name="singlePercent" [nzMin]='1' [nzMarks]="singlePercentMarks"
              [nzTooltipVisible]="'always'"></nz-slider>
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:form.get('singlePercent'), name:'singlePercent'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.REMARK' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="remark" name="remark" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('remark'), name:'remark'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('min'); else fourth">{{ errorTips[name]?.min }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('max')">{{ errorTips[name]?.max }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>